<template>
  <div class="md-pages-home">
    <div class="md-swiper-con">
      <div class="opacity-bg" :style="{'background-image': `url(${oBg})`}"></div>
      <div class="md-swiper-container">
        <div class="md-category-box">
          <ul class="menu-list">
            <li class="menu-item" v-for="(item, index) in drawList" :key="index" @mouseenter="drawShow(index)" @mouseleave="drawHide">
              <span>{{item.name}}</span>
              <i class="el-icon-caret-right a-r"></i>
            </li>
          </ul>
          <div class="draw-box" v-show="drawFlag" @mouseenter="drawFlag = true" @mouseleave="drawFlag = false">
            <h3>{{drawInfo.name}}</h3>
            <p>
              <span v-for="(c, i) in drawInfo.categoryList" :key="i" @click="handleItemClick(drawInfo.rid, c.rid)">{{c.name}}</span>
            </p>
          </div>
        </div>
        <div class="md-swiper-box">
          <el-carousel height="500px" :interval="4000" @change="handleCarousel">
            <el-carousel-item v-for="(item, index) in swiperList" :key="index">
              <img class="swiper-img" :src="`/video-dev${item.image}`" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="md-class-con" v-for="(item, index) in tuijianList" :key="index" :style="{background: index % 2 === 0 ? '#fff' : 'transparent'}">
      <div class="md-class-container">
        <h3>{{item.alias || item.name}}</h3>
        <ul class="md-class-list">
          <li v-for="(v, i) in item.vhomeRecommendedDetails" :key="i">
            <MdItemClassComponent :classInfo="v" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 合作院校 -->
    <div class="cooperation-school" style="background: #fff">
      <h3>合作院校</h3>
      <MdSchoolClassComponent :schools="schools" />
    </div>
  </div>
</template>

<script>
// import { mdApiBase } from '@/ddd/config.service.js'
import { getIPLogin } from '@/axios/user'
import { selectArticleList } from '@/axios/news'
import { getCategoryList } from '@/axios/course'
import { getBannerList, getHomeVideoList,getvdeosList } from '@/axios/home'
import MdItemClassComponent from "../components/class/mdItem/index.vue";
import MdSchoolClassComponent from '../components/class/mdSchool/index.vue'
export default {
  name: 'MdPagesHomeComponent',
  components: {
    MdItemClassComponent,
    MdSchoolClassComponent
  },
  data () {
    return {
      drawFlag: false,
      drawList: [],
      drawInfo: {},
      swiperList: [],
      videoLists: [],
      schools: [],
      oBg: '',
      params: {
        page: 1
      },
      total: 20,
      tuijianList: []
    }
  },
  created () {
    if (!localStorage.getItem('isLogin')) { // 用户没登录查询是否在规定ip段内
      this.getIPLogin()
    } else {
      this.init()
    }
    this.getTuiJian()
    this.get()
    // this.$http.get('/fro/resources/one/groups?resourceId=651d7d2f0ede3538c00a9f5c&countTotal=1', {
    //   baseURL: '/api'
    // }).then(res => {
    //   console.log(res)
    // })
  },
  methods: {
    // 判断当前ip是否在规定ip范围内
    async getIPLogin () {
      const res = await getIPLogin()
      if (res.code === 200) {
        if (res.data) {
          this.$store.state.user.dept = res.data
          sessionStorage.setItem('deptId', res.data.deptId)
          sessionStorage.setItem('deptName', res.data.deptName)
        } else {
          // this.$router.replace('/login')
        }
      }
      this.init()
    },
    init () {
      this.getCategoryList()
      this.getBannerList()
      this.getHomeVideoList()
      this.selectArticleList()
    },
    async getBannerList () { // 获取banner
      const res = await getBannerList({
        type: 1
      })
      if (res.code === 200) {
        this.swiperList = res.data
        this.oBg = this.swiperList[0].img
      }
    },
    async getHomeVideoList () {
      const res = await getHomeVideoList()
      console.log(res,'res');
      if (res.code === 200) {
        this.videoLists = res.data
      }
    },
    async getCategoryList () {
      const res = await getCategoryList(1)
      if (res.code === 200) {
        this.drawList = res.data
      }
    },
    async selectArticleList () {
      const params = {
        type1: 3,
        pageNum: 1,
        pageSize: 100
      }
      const res = await selectArticleList(params)
      if (res.code === 200) {
        const data = res.rows
        const count = res.rows.length - 6
        if (count < 6) {
          for (let index = 0; index < 6; index++) {
            data.push({
              cover: null
            })
          }
        }
        this.schools = data
      }
    },
    handleItemClick (pId, cId) {
      this.$router.push({
        path: '/category',
        query: {
          pId,
          cId
        }
      })
    },
    handleCarousel (e) {
      this.oBg = this.swiperList[e].img
    },
    drawShow (index) {
      this.drawFlag = true
      this.drawInfo = this.drawList[index]
    },
    drawHide () {
      this.drawFlag = false
    },
    handleCurrentChange (val) {
      this.params.page = val
    },
    async getTuiJian () {
      try {
        const res = await this.$http.get('/web/nominate/getNominateList')
        console.log(res)
        this.tuijianList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    async get(){
         const res =await getvdeosList(87);
         console.log(res,'请求回来的代码');
    }
  }
}
</script>
<style lang="less" scoped>
.md-pages-home {
  width: 100%;
  .md-swiper-con {
    padding: 40px 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    position: relative;
    .opacity-bg {
      position: absolute;
      top: 0;
      left: 0;
      height: 180px;
      width: 100%;
      opacity: 0.3;
      filter: blur(100px);
    }
  }
  .md-swiper-container {
    width: 1152px;
    margin: 0 auto;
    height: 500px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    .md-category-box {
      width: 200px;
      height: 100%;
      background: #fff;
      flex-shrink: 0;
      border-radius: 10px 0 0 10px;
      padding: 15px 0;
      .menu-list {
        height: 100%;
        overflow-y: hidden;
        .menu-item {
          cursor: pointer;
          height: 50px;
          line-height: 50px;
          padding: 0 15px;
          color: #333;
          font-size: 14px;
          position: relative;
          &:hover {
            color: @md-primary-color;
            background: rgba(255, 255, 255, 0.1);
          }
          span {
            width: 90%;
            display: inline-block;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .space {
            margin: 0 3px;
          }
          .a-r {
            position: absolute;
            right: 10px;
            top: 20px;
            font-size: 10px;
            color: #ccc;
          }
        }
      }
      .draw-box {
        position: absolute;
        top: 0;
        left: 200px;
        width: 400px;
        z-index: 99;
        height: 100%;
        background: #fff;
        border-radius: 0px;
        border-left: 1px solid #f5f7fa;
        padding: 20px 30px;
        box-sizing: border-box;
        h3 {
          margin-bottom: 10px;
          font-size: 16px;
          color: #333;
          line-height: 22px;
          font-weight: 700;
        }
        p {
          b {
            color: #1c1f21;
          }
          span {
            color: #6d7278;
            margin-right: 20px;
            margin-bottom: 10px;
            cursor: pointer;
            display: inline-block;
            &:hover {
              color: @md-primary-color;
            }
          }
        }
      }
    }
    .md-swiper-box {
      flex: 1;
    }
  }
  .md-class-con {
    width: 100%;
    color: #f5f7fa;
    padding-top: 20px;
    .md-class-container {
      width: 1152px;
      margin: 0 auto;
      // padding: 40px 0;
      h3 {
        color: @md-primary-color;
        margin-bottom: 20px;
        font-size: 24px;
      }
      .md-class-list {
        display: flex;
        flex-wrap: wrap;
        li {
          &:nth-child(4n) {
            .md-item-class-component {
              margin-right: 0;
            }
          }
        }
      }
      .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
  .cooperation-school {
    width: 100%;
    overflow: hidden;
    h3 {
      width: 1152px;
      margin: 10px auto 20px;
      color: @md-primary-color;
      // margin-bottom: 20px;
      font-size: 24px;
    }
  }
}
/deep/ .el-carousel__container .el-carousel__item .swiper-img {
  width: 100%;
  height: 100%;
}
/deep/ .el-carousel__item.is_animating {
  transition: 1s all;
}
/deep/ .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/deep/ .el-pagination .btn-next,
.el-pagination .btn-prev {
  background: transparent !important;
}
/deep/ .el-pagination button:disabled {
  background: transparent !important;
}
/deep/ .el-pager li {
  background: transparent !important;
}
/deep/ .el-pager li.active {
  color: #f20d0d;
}
/deep/ .el-pager li:hover {
  color: #f20d0d;
}
/deep/ .el-input__inner:focus {
  border-color: #f20d0d !important;
}
/deep/ .el-pagination button:hover {
  color: #f20d0d;
}
.scroll-bar {
  &::-webkit-scrollbar-track {
    // border-radius: 10px;
    background-color: #efefef;
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #efefef;
  }

  &::-webkit-scrollbar-thumb {
    // border-radius: 10px;
    // background-color: rgba(0, 0, 0, 0.2);
    background-color: #888;
  }
}
</style>
